<template>
    <div>
      <div class="cap-tmpl">
        <div class="row">
          <div class="row-box rowbj">
            <div class="row-title">数据指标</div>
            <div class="row-con">
              <div class="col">
                <div class="col-box">
                  <span class="cap-title" title="我参与的项目">我参与的项目</span>
                  <span class="cap-text-color">{{projectHome.projectCount}}</span>
                </div>
                <div class="colicon"><i class="tubiao1"></i></div>
              </div>
              <div class="col">
                <div class="col-box">
                  <span class="cap-title">正在实施的项目</span>
                  <span class="cap-text-color">{{projectHome.applyCount}}</span>
                </div>
                <div class="colicon"><i class="tubiao2"></i></div>
              </div>
              <div class="col">
                <div class="col-box">
                  <span class="cap-title">已关闭的项目</span>
                  <span class="cap-text-color">{{projectHome.archiveCount}}</span>
                </div>
                <div class="colicon"><i class="tubiao3"></i></div>
              </div>
              <div class="col">
                <div class="col-box">
                  <span class="cap-title">我发现的审计疑点</span>
                  <span class="cap-text-color">{{projectHome.pointCount}}</span>
                </div>
                <div class="colicon"><i class="tubiao4"></i></div>
              </div>
              <div class="col">
                <div class="col-box">
                  <span class="cap-title">我发现的审计问题</span>
                  <span class="cap-text-color">{{projectHome.problemCount}}</span>
                </div>
                <div class="colicon"><i class="tubiao5"></i></div>
              </div>
              <div class="col">
                <div class="col-box">
                  <span class="cap-title">我编写的工作底稿</span>
                  <span class="cap-text-color">{{projectHome.paperCount}}</span>
                </div>
                <div class="colicon"><i class="tubiao6"></i></div>
              </div>
            </div>
          </div>
        </div>
        <div class="row-tab rowbj">
          <el-tabs v-model="activeName" @tab-click="handleClick('task')">
            <el-tab-pane label="待办事项" name="first">
              <el-table header-row-class-name="container-table-header" :data="taskList" size="small" style="width: 100%;margin-bottom: 20px;"
                        row-key="taskId" border stripe v-loading="loading">
                <el-table-column prop="name" label="任务名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="userName" label="申请人">
                </el-table-column>
                <el-table-column prop="startTime" label="接收时间">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">
                    <el-tag :type="scope.row.status | approveStatusTag">{{ scope.row.status | approveStatus }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" icon="el-icon-edit" @click="showTaskAuditTaskDialog(scope.row)">审批</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="container-page">
                <el-pagination
                  @size-change="sizeChangeTask"
                  @current-change="currentChangeTask"
                  :current-page="pageTask.current"
                  :page-sizes="[10, 20, 30, 40, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageTask.total">
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="row-tab rowbj">
          <el-tabs v-model="activeName" @tab-click="handleClick('message')">
            <el-tab-pane label="我的消息" name="first">
              <el-table header-row-class-name="container-table-header" :data="messageList" size="small" style="width: 100%;margin-bottom: 20px;"
                        row-key="taskId" border stripe v-loading="messageLoading">
                <el-table-column prop="title" label="标题" min-width="300" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="fromUserName" label="发送人">
                </el-table-column>
                <el-table-column prop="createTime" label="发送时间">
                </el-table-column>
                <el-table-column label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" icon="el-icon-view" @click="showViewDialog(scope.row, true)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="container-page">
                <el-pagination
                  @size-change="sizeChangeTask"
                  @current-change="currentChangeTask"
                  :current-page="messagePage.current"
                  :page-sizes="[10, 20, 30, 40, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="messagePage.total">
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!--修改密码-->
      <el-dialog
          title="密码修改"
          :visible.sync="dialogVisible"
          width="500px"
          :show-close="false"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :modal-append-to-body="false">
        <avue-form ref="pwdForm" :option="option" v-model="form"></avue-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" :disabled="handleSubmitLoad" @click="handleSubmit"><i v-loading="handleSubmitLoad"></i>修改</el-button>
        </span>
      </el-dialog>

      <task-audit @setValue="setTaskAuditTaskDialog" @closeDialog="closeTaskAuditTaskDialog" ref="taskAuditDialog" />
    </div>
</template>

<script>
import "@/styles/index.scss";
import {mapGetters} from "vuex";
import request from '@/router/axios';
import LedgerPage from "@/components/ledger/index";
import {fetchList} from "@/api/act/task";
import {doReadMessage, fetchList as messageList} from "@/api/act/message";
// import {updatePassword} from "@/api/system/user";
import {countProjectHome} from "@/api/adis/home/home";

export default {
        name: "wel",
      data() {
        let validatePass = (rule, value, callback)=>{
          const regex = /^(?=.{8,})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[*?!&￥$%^#,./@";:><\[\]}{\-=+_\\|》《。，、？'‘“”~ `]).*$/;

          if (value === '') {
            callback(new Error('请输入密码'));
          } else if (!regex.test(value)) {
            callback(new Error('密码英文大小写、数字、特殊字母不小于8位'));
          } else {
            callback();
          }
        };
        let validatePass1 = (rule, value, callback)=>  {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.form.newPassword) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        return {
          nowDate: '',
          loading: false,
          showScore: false,
          todoList: [],
          doneList: [],
          query: {
            year: '2022'
          },
          page: {
            pageSize: 10,
            currentPage: 1,
            total: 0
          },
          data: [],
          viewBox: false,
          fileList: [],
          form: {},
          score: 0,
          todoCount: 0,
          doneCount: 0,
          echartH: 0,
          ownDeptObject: {deptId: ''},
          optionDept: {
            addBtn: false,
            editBtn: false,
            delBtn: false,
            updateBtn: false,
            saveBtn: false,
            cancelBtn: false,
            searchBtn: false,
            viewBtn: false,
            emptyBtn: false,
            submitBtn: false,
            column: [{
              label: "",
              prop: "deptId",
              type: "tree",
              dicData: [],
              slot: true,
              search: true,
              labelWidth: 0,
              row: true,
              span: 24,
              props: {
                label: "title"
              },
              rules: [{
                required: false,
                message: "请选择部门",
                trigger: "click"
              }]
            }]
          },
          totalScore: 0,
          dialogVisible: false,
          option: {
            submitBtn: false,
            emptyBtn: false,
            column: [{
              label: '原密码',
              span: 24,
              row: true,
              type: 'password',
              prop: 'oldPassword',
            }, {
              label: '新密码',
              span: 24,
              row: true,
              type: 'password',
              prop: 'newPassword',
              message: "密码英文大小写、数字、特殊字母不小于6位",
              rules: [{ validator: validatePass, trigger: 'blur' }]
            }, {
              label: '确认密码',
              span: 24,
              row: true,
              type: 'password',
              prop: 'newPassword1',
              rules: [{ validator: validatePass1, trigger: 'blur' }]
            }]
          },
          handleSubmitLoad: false,
          activeName: 'first',

          taskList: [],
          pageTask: {
            pageSize: 10,
            currentPage: 1,
            total: 0
          },

          projectHome: {
            projectCount: 0,
            applyCount: 0,
            archiveCount: 0,
            pointCount: 0,
            problemCount: 0,
            paperCount: 0
          },
          messagePage: {
            pageSize: 10,
            currentPage: 1,
            total: 0
          },
          messageList: [],
          messageLoading: false,
        };
      },
      components: { LedgerPage },
      computed: {
          ...mapGetters(["userInfo", "permissions"])
      },
      created() {
        if (!this.userInfo.isModifyPass) {
          this.dialogVisible = true
        }
        // 统计项目情况
        // 标记已读
        countProjectHome().then(res => {
          this.projectHome = res.data.data;
        });
        this.onLoadTask();
        this.onLoadMessage();
      },
      methods: {
        handleSubmit() {
          this.$refs['pwdForm'].validate((valid) => {
            if (valid) {
              this.handleSubmitLoad = true
              const params = {
                password: this.form.oldPassword,
                newpassword1: this.form.newPassword,
                newpassword2: this.form.newPassword1
              }
              request({
                url: '/admin/user/update-password',
                method: 'put',
                data: params
              }).then(response => {
                console.log('response',response)
                if (response.data.data) {
                  this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success',
                    duration: 2000
                  })
                  // 修改密码之后强制重新登录
                  this.$store.dispatch('LogOut').then(() => {
                    location.reload() // 为了重新实例化vue-router对象 避免bug
                  })
                } else {
                  this.$notify({
                    title: '失败',
                    message: response.data.msg,
                    type: 'error',
                    duration: 2000
                  })
                }
                setTimeout(()=>{
                  this.handleSubmitLoad = false
                },1500)
              }).catch(() => {
                this.$notify({
                  title: '失败',
                  message: '修改失败',
                  type: 'error',
                  duration: 2000
                })
                setTimeout(()=>{
                  this.handleSubmitLoad = false
                },1500)
              })
            } else {
              return false;
            }
          });
        },
        handleClick(name) {
          if(name === 'task') {
            this.onLoadTask();
          }
          if(name === 'message') {
            this.onSearchMessage();
          }
        },
        handleSelectionChange(row) {
          this.tableSelected = row
          console.log(row, 999)
        },

        currentChangeTask(current) {
          this.pageTask.Taskcurrent = current;
          this.onLoadTask(this.pageTask);
        },
        sizeChangeTask(size) {
          this.pageTask.size = size;
          this.onLoadTask(this.pageTask);
        },
        onLoadTask(page, params = {}) {
          this.loading = true;
          fetchList(Object.assign(params, page)).then(res => {
            this.loading = false;
            const data = res.data.data;
            this.pageTask.total = data.total;
            this.taskList = data.records;
          }, () => {
            this.loading = false;
          });
        },

        showTaskAuditTaskDialog(row) {
          this.$refs['taskAuditDialog'].initData({taskId: row.taskId, processId: row.processId, isView: false});
        },
        closeTaskAuditTaskDialog() {
          this.onLoadTask(this.pageTask);
        },
        setTaskAuditTaskDialog() {
          this.onLoadTask(this.pageTask);
        },
        onSearchMessage() {
          this.messagePage.current = 1;
          this.onLoadMessage(this.messagePage);
        },
        onLoadMessage(page) {
          this.messageLoading = true;
          messageList(Object.assign({status: 0}, page)).then(res => {
            this.messageLoading = false;
            const data = res.data.data;
            this.messagePage.total = data.total;
            this.messageList = data.records;
          }, () => {
            this.messageLoading = false;
          });
        },
        showViewDialog(row, unRead) {
          if(unRead) {
            // 标记已读
            doReadMessage(row.id).then(res => {
              this.loading = false;
              const data = res.data.data;
              const message = this.messageCount - data
              this.$store.commit('SET_MESSAGE', {message})
            });

            this.$message({
              type: "success",
              message: '消息已读'
            });
            this.onSearchMessage();
          }
          /*this.fkId = row.fkId;
          this.viewPage = row.toUrl;
          this.taskViewDialog = true;*/
          if(row.toUrl) {
            console.info(row.toUrl)
            this.$router.push({
              path: this.$router.$avueRouter.getPath({
                name: '',
                src: row.toUrl,
              })
            }).catch(() => {});
          }
        }
      }
    };
</script>

<style>
</style>

